
<template>
  <div>
    <div style="height:30px"></div>

    <fullcalendar :events="monthData" class="fc" lang="zh" first-day='0'
      locale="zh-cn" eventLimit="1">
      <template slot-scope="p" slot="fc-body-card">
        <el-tooltip class="item" placement="top">
          <div>{{p.event}}</div>
        </el-tooltip>
      </template>
    </fullcalendar>

    <vol-box :lazy="true" :model.sync="model" title="日历" :height="400" :width="700">
      <div class="container">
        <div>
          <VolForm ref="myform" :loadKey="true" :formFileds="formFileds"></VolForm>
        </div>
      </div>
    </vol-box>
  </div>
</template>
<script>
import VolForm from "@/components/basic/VolForm.vue";
import VolBox from "@/components/basic/VolBox.vue";
import FullCalendar from '../../assets/vue-fullcalendar/fullCalendar.vue'
export default {
  data () {
    return {
      title: "",
      model: false,
      gridData: [],
      formFileds: {
        bookingPhone: "",
        bookingName: "",
        bookingIdCard: "",
        bookingType: "",
        distributor: "",
        playStartDate: ""
      },

      visible: false,
      monthData: [
      ],
      productID: ""
    }
  },
  watch: {
    '$route' () {
      if (this.$route.path.indexOf("V_productbydate") > -1) {
        this.init()
      }
    }
  },
  mounted () {
    window.addEventListener('setItem', () => {
      this.init();
    })
  },
  provide () { return { initClick: this.initClick } },
  methods: {
    init () {
      console.log(this.$route)
      var id = this.$route.params.id;
      var bArr = this.title.split("年")
      let year = bArr[0]
      let month = bArr[1].split("月")[0]
      var date = `${year}-${month}`
      if(this.$route.params.type == '3'){//采购价格日历
        if (id) {
          this.http.get("api/distriProducts/GetProductsProcurePriceCalendar?productID=" + id + "&date=" + date, '', false).then(reslut => {
            let allData = reslut.data
            console.log(reslut)
            this.monthData = []
            this.UtilHandleBigData(allData, (data) => {
              this.monthData.push(...data);
            });
          });
        }
      }else if(this.$route.params.type == '2'){//二销价格日历
        if (id) {
          // this.http.get("api/Mall_distri_product_second/GetProductsPriceCalendar?dissecondId=" + id + "&date=" + date, '', false).then(reslut => {
          this.http.get("api/distriProducts/getProductsPriceCalendar?productID=" + id + "&date=" + date, '', false).then(reslut => {
            let allData = reslut.data
            console.log(reslut)
            this.monthData = []
            this.UtilHandleBigData(allData, (data) => {
              this.monthData.push(...data);
            });
          });
        }
      }else{
        if (id) {
          this.http.get("api/distriProducts/getProductsPriceCalendar?productID=" + id + "&date=" + date, '', false).then(reslut => {
            let allData = reslut.data
            this.monthData = []
            this.UtilHandleBigData(allData, (data) => {
              this.monthData.push(...data);
            });
          });
        }
      }
    },
    // 点击传参
    initClick (title) {
      this.title = title
      this.init();
    },
    getForm () {
      let data = [];
      return data;
    },
    // data为所有数据的数组 ， callback 拿到当数据要做的操作 ,pageSize 一次取多少条
    UtilHandleBigData (data, callback, pageSize = 200) {
      let totalCount = data.length; // 共多少条
      let currentPageNumber = 1; // 当前页数
      let totalPageNumer = Math.ceil(totalCount / pageSize); //可分多少页,就是分割为多少个小数组
      let handler = () => {
        let start = (currentPageNumber - 1) * pageSize;
        let end = currentPageNumber * pageSize;
        let currentData = data.slice(start, end); // 当前页的数据
        if (typeof callback === "function") {
          callback(currentData, {
            totalCount,
            totalPageNumer,
            currentPageNumber,
            pageSize,
          });
        }
        if (currentPageNumber < totalPageNumer) {
          window.requestAnimationFrame(handler);
        }
        currentPageNumber++;
      };
      handler();
    }
  },
  components: {
    fullcalendar: FullCalendar,
    VolBox,
    VolForm
  }
}
</script>
<style>
.red {
  background: red;
}
.blue {
  background: blue;
}
.fc {
  /* the calendar root */
  max-width: 1100px;
  margin: 0 auto;
}
</style>
